<template>
  <div class="container">
    <div class="appSelect">
      <label>所属租户</label>
      <el-select
        size="mini"
        v-model="value"
        placeholder="请选择"
        @change="selectChange"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <edit-table-new
      :tableSetting="tableSettingParam"
      ref="tableParam"
    ></edit-table-new>
  </div>
</template>

<script>
import {
  sonTableAll,
  sonTableAdd,
  sonTableEdit,
  sonTableDelete,
} from "@/api/systemManagement/configManagement.js";
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
export default {
  props: {
    selectId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      options: [],
      value: "",
      tableSettingParam: {
        btnArr: ["add", "edit"],
        column: [
          {
            label: "所属租户",
            textAlign: "center",
            type: "select",
            text:"appName",
            prop: "appid",
            required: true,
            methods: (val,row) => {    
              row.appName = this.appDiction[val];
              row.isChange = true;
            },
          },
          {
            label: "key",
            textAlign: "center",
            prop: "key",
            required: true,
            methods: (row) => {
              row.isChange = true;
            },
          },
          {
            label: "value",
            textAlign: "center",
            prop: "value",
            required: true,
            methods: (row) => {
              row.isChange = true;
            },
          },
          {
            label: "排序",
            textAlign: "center",
            prop: "sort",
            required: true,
            methods: (row) => {
              row.isChange = true;
            },
          },
        ],
        title: "字典详情",
        data: [],
        select: false,
        maxHeight: "650px",
        buttonArr: [
          {
            //text:"取消",
            icon: "el-icon-refresh",
            isShow: (row) => {
              return row.isChange;
            },
            methods: (row, index) => {
              //row.editable = false;
              row.appid = this.orginData[index].appid;
              row.appName = this.orginData[index].appName;
              row.key = this.orginData[index].key;
              row.value = this.orginData[index].value;
              row.sort = this.orginData[index].sort;
              row.isChange = false;
            },
          },
          {
            //text:"保存",
            icon: "el-icon-success",
            isShow: (row) => {
              return row.isChange;
            },
            methods: (row, index) => {
              if (!this.$utils.objIsNull(row)) {
                this.addDictionary(row);
                row.editable = false;
              } else {
                this.$message.error("列表项不能为空");
              }
            },
          },
          {
            //text:"删除",
            icon: "el-icon-delete-solid",
            isShow: (row) => {
              return true;
            },
            methods: (row, index) => {
              this.$confirm("确定要删除这条数据吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  if (row.hasOwnProperty("id")) {
                    this.delete(row.id);
                  } else {
                    this.tableSettingParam.data.splice(index, 1);
                    //console.log(this.tableSettingParam.data);
                  }
                })
                .catch(() => {});
            },
          },
        ],
      },
      appId: "",
      orginData: [],
      appDiction:{}
    };
  },
  watch: {
    selectId: {
      handler(val) {
        this.getTableData(val);
      },
    },
  },
  created() {
    this.getSelectData();
  },
  methods: {
    //所属租户下拉框值改变
    selectChange(val) {
      this.appId = val;
      this.getTableData(this.selectId);
    },
    //添加数据字典详情
    addDictionary(row) {
      if (row.hasOwnProperty("id")) {
        sonTableEdit(row)
          .then((res) => {
            this.$message.success(res.description);
            this.getTableData(this.selectId);
          })
          .catch((error) => {});
      } else {
        row.dictionary = this.selectId;
        sonTableAdd(row)
          .then((res) => {
            this.$message.success(res.description);
            this.getTableData(this.selectId);
          })
          .catch((error) => {});
      }
    },
    //删除数据字典详情
    delete(id) {
      sonTableDelete({ findId: id }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.getTableData(this.selectId);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取下拉框数据
    getSelectData() {
      applicationQueryList().then(
        (res) => {
          let arr = res.data.map((item) => {
            const obj = {
              label: item.name,
              value: item.id,
            };
            this.appDiction[item.id] = item.name;
            return obj;
          });
          arr.unshift({ label: "公共", value: "0" });
          this.appDiction["0"] = "公共";
          this.options = arr;
          this.$set(this.tableSettingParam.column[0], "seleteOption", arr);
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取数据字典详情
    getTableData(id) {
      const params = {
        appid: this.appId,
        dictionary: id,
      };
      sonTableAll(params).then(
        (res) => {
          if (res.code == 200) {
            let data = res.data;
            data.forEach((item, i) => {
              item.editable = false;
              item.rowIndex = i;
              item.isChange = false;
              item.appName = this.appDiction[item.appid];
            });
            this.$set(this.tableSettingParam, "data", data);
            this.orginData = JSON.parse(JSON.stringify(data));
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .appSelect {
    text-align: left;
    label {
      margin: 0 10px;
    }
  }
}
</style>
